<template>
  <el-card>
    <template #header>
      <h3>自定义插槽的表格</h3>
    </template>

    <base-table :data="tableData" :columns="columns">
      <!-- 自定义table column header -->
      <template #dateHeader>
        <el-tag type="success">日期1</el-tag>
      </template>
      <template #date="row"> {{ row.date }}自定义slot </template>
      <template #username="row"> {{ row.name }}slot是字符串 </template>
      <el-table-column prop="age" label="默认插槽"></el-table-column>
    </base-table>
  </el-card>
</template>
<script>
import { ElTableColumn } from 'element-plus'
export default {
  name: 'SlotTable',
  components: { ElTableColumn },
  setup() {
    const columns = [
      {
        prop: 'date',
        label: '日期',
        fixed: true,
        slot: { body: 'date', header: 'dateHeader' }
      },
      { prop: 'name', label: '姓名', slot: 'username' },
      { prop: 'address', label: '地址' },
      { prop: 'email', label: '邮箱' },
      { prop: 'fax', label: '传真' }
    ]
    const tableData = [
      {
        date: '2021-10-10',
        name: '波仔',
        address: '海南省海口市海南大厦',
        email: '864181495@qq.com',
        fax: '2222 2222',
        age: 18
      }
    ]
    return {
      columns,
      tableData
    }
  }
}
</script>
